<!-- 2-柱形有tip图表 -->
<template>
  <div class="pieChartBox" style="width: 100%; height: 3rem" :ref="id"></div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
    },
    tip_data1: {
      type: Array,
      default: [],
    },
    tip_data2: {
      type: Array,
      default: [],
    },
    tipName1: {
      type: String,
    },
    tipName2: {
      type: String,
    },
  },
  data: function () {
    return {
      titleName: ["盈利概率", "亏损概率"],
    };
  },
  created() {
    this.showChartColumn();
  },
  //页面载入之前执行
  // 每次加载都执行
  activated: function () {
    alert(this.id);
    // this.showChart()
  },
  // watch: {
  //           'tip_data1': {
  //               handler(newVal) {
  //                   this.tip_data1 = newVal;
  //                   alert(this.id)
  //                   this.showChartColumn()
  //               },
  //           },
  //           'tip_data2': {
  //               handler(newVal) {
  //                   this.tip_data2 = newVal;
  //                   this.showChartColumn()
  //               }
  //           },
  //       },
  methods: {
    //add 字体自适应
    fontSize(res) {
      let docEl = document.documentElement,
        clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 750);
      return res * fontSize;
    },
    getOption() {
        let _this =this;
      let option = {
        tooltip: {
          backgroundColor: "transparent", //通过设置rgba调节背景颜色与透明度
          barBorderRadius: 0, //设置圆角角度为0
          extraCssText: "z-index:2", //提示层级降低
          padding: 4,
          borderWidth: 0,
          textStyle: {
            color: "#fff", //设置文字颜色
          },
          // trigger: 'axis',// 显示全部
          axisPointer: {
            type: "shadow",
          },
          extraCssText: "width:125px;height:40px;z-index:2", //提示层级降低

          triggerOn: "click",
          formatter: function (params, ticket, callback) {
            if (params.dataIndex == 0 && params.value != null) {
              let nameStr = "";
              if (params.seriesIndex == 0) {
                //盈利0
                if (_this.tipName1.length > 9) {
                  nameStr = _this.tipName1.substring(0, 9) + "...";
                } else {
                  nameStr = _this.tipName1;
                }
              } else if (params.seriesIndex == 1) {
                if (_this.tipName2.length > 9) {
                  nameStr = _this.tipName2.substring(0, 9) + "...";
                } else {
                  nameStr = _this.tipName2;
                }
              }
              setTimeout(function () {
                callback(ticket);
              }, 2000);
              return (
                '<div style="background:#000;width: 125px;height: 40px;position: absolute;border-radius: 4px;padding: 4px;"><div style = "text-align:center;"></div>' +
                '<span style = "width:125px; display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;line-height: 17px;;font-size: .24rem;"><span class="sj" style="width: 0;height: 0;border-top: 20px solid transparent;border-bottom: 20px solid transparent; border-right: 20px solid rgba(0,0,0);position: absolute;left: -18px;top: .005rem;"><em style="width:.12rem;height:.12rem;border-radius:50%;position:absolute;left:-.13rem;background:#000;top:-.05rem;"></em></span>' +
                nameStr +
                "</span>" +
                '<div style="line-height: 17px;;font-size: .24rem;margin-top: -.1rem;">' +
                params.name +
                "： " +
                params.value +
                "%" +
                "</div></div></div>"
              );
            }
            if (params.dataIndex == 1 && params.value != null) {
              let nameStr = "";
              if (params.seriesIndex == 0) {
                //盈利0
                if (_this.tipName1.length > 9) {
                  nameStr = _this.tipName1.substring(0, 9) + "...";
                } else {
                  nameStr = _this.tipName1;
                }
              } else if (params.seriesIndex == 1) {
                if (_this.tipName2.length > 9) {
                  nameStr = _this.tipName2.substring(0, 9) + "...";
                } else {
                  nameStr = _this.tipName2;
                }
              }

              setTimeout(function () {
                callback(ticket);
              }, 2000);
              return (
                '<div style="background:#000;width: 125px;height: 40px;position: absolute;border-radius: 4px;padding: 4px;"><div style = "text-align:center;"></div>' +
                '<span style = "width:125px; display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;line-height: 17px;;font-size: .24rem;">' +
                nameStr +
                "</span>" +
                '<div style="line-height: 17px;;font-size: .24rem;margin-top: -.1rem;">' +
                params.name +
                "： " +
                params.value +
                "%" +
                '<span class="sj" style="width: 0;height: 0;border-top: 20px solid transparent;border-bottom: 20px solid transparent; border-left: 20px solid rgba(0, 0, 0);position: absolute;right: -18px;top: .005rem;"><em style="width:.12rem;height:.12rem;border-radius:50%;position:absolute;right:-.13rem;background:#000;top:-.05rem;"></em></span></div></div></div>'
              );
            }
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "10%",
          top: "10%",
          containLabel: true,
        },
        // calculable: true,
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: this.titleName,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#333",
                fontSize: 10,
              },
            },
            //X轴底
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 0,
              },
            },
          },
        ],
        legend: {
          //隐藏图例
          data: ["title1"],
          selected: {
            title1: false, //不想显示的都设置成false
          },
          textStyle: {
            color: "#fff",
          },
          // silent: true, //取消图例上的点击事件
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#efefef",
              },
            },
            min: 0,
            max: 100,
            //标注Y轴竖线
            axisLine: {
              show: false,
              //Y轴文字颜色
              lineStyle: {
                color: "#999999",
                fontSize: 10,
              },
            },

            //标注Y轴横杠
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: function (value) {
                return parseFloat(value).toFixed(2) + "%";
              },
            },
          },
        ],
        series: [
          {
            name: "中邮军民融合灵活配置股… ",
            type: "bar",
            barGap: 0,
            barWidth: 18, //柱图宽度
            barGap: "0.9", //多个并排柱子设置柱子之间的间距
            itemStyle: {
              //柱图渐变色
              normal: {
                // color: new echarts.graphic.LinearGradient(
                //     0, 0, 0, 1,
                //     [{
                //             offset: 0,
                //             color: '#ffe458'
                //         },
                //         {
                //             offset: 1,
                //             color: '#ff3471'
                //         },
                //     ]
                // )
                color: function (params) {
                  // 渐变色，为0时灰色高度是2
                  var colorList =   new _this.$echarts4.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#ffe458",
                      },
                      {
                        offset: 1,
                        color: "#ff3471",
                      },
                    ]
                  );
                  if (params.value == "0.00") {
                    return "#D9E2F6";
                  } else {
                    return colorList;
                  }
                },
              },
            },
            // 区块背景色
            markArea: {
              data: [
                [
                  {
                    // name: '盈利概率',
                    x: "17%",
                    itemStyle: {
                      color: "rgba(255,0,0, 0.09)",
                    },
                  },
                  {
                    x: "60%",
                    itemStyle: {
                      color: "rgba(255,0,0, 0.09)",
                    },
                  },
                ],
              ],
            },
            // 柱形图上显示数据
            label: {
              normal: {
                show: true,
                fontSize: 12,
                color: "#333",
                position: "top",
                formatter: function (params) {
                  if (params.value == 0) {
                    return "--";
                  } else {
                    return params.value + "%";
                  }
                },
              },
            },
            data: this.tip_data1,
            barMinHeight: 2, //默认最小高度
          },
          {
            name: "富国研究精中邮军民融合灵活配置股… ",
            type: "bar",
            barWidth: 18, //柱图宽度
            itemStyle: {
              normal: {
                // color: new echarts.graphic.LinearGradient(
                //     0, 0, 0, 1,
                //     [{
                //             offset: 0,
                //             color: '#C42CFF'
                //         },
                //         {
                //             offset: 1,
                //             color: '#0768F8'
                //         },
                //     ]
                // )
                color: function (params) {
                  // 渐变色，为0时灰色高度是2
                  var colorList = new _this.$echarts4.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#C42CFF",
                      },
                      {
                        offset: 1,
                        color: "#0768F8",
                      },
                    ]
                  );
                  if (params.value == "0.00") {
                    return "#D9E2F6";
                  } else {
                    return colorList;
                  }
                },
              },
            },
            //区块背景色
            markArea: {
              data: [
                [
                  {
                    x: "60%",
                    itemStyle: {
                      color: "rgba(44,255,137, 0.09)",
                    },
                  },
                  {
                    x: "100%",
                    itemStyle: {
                      color: "rgba(44,255,137, 0.09)",
                    },
                  },
                ],
              ],
            },
            // 柱形图上显示数据
            label: {
              normal: {
                show: true,
                fontSize: 12,
                color: "#333",
                position: "top",
                formatter: function (params) {
                  if (params.value == 0) {
                    return "--";
                  } else {
                    return params.value + "%";
                  }
                },
              },
            },
            data: this.tip_data2,
            barMinHeight: 5, //默认最小高度
          },
        ],
      };
      return option;
    },
    showChartColumn() {
      if (this.id) {
        this.$nextTick(() => {
          let myChart = this.$echarts4.init(this.$refs[`${this.id}`]);
          if (this.getOption() && typeof this.getOption() === "object") {
            this.getOption() && myChart.setOption(this.getOption());
          }
          window.addEventListener("resize", () => {
            myChart.resize();
          });
        });
      }
    },
  },
  mounted() {
    if (this.id) {
      let myChart = this.$echarts4.init(this.$refs[`${this.id}`]);
      myChart.getZr().on("click", (res) => {
        //拿到index即可取出被点击数据的所有信息
      });
    }
  },
};
</script>
